@use 'src/identity/components/GlobalHeader/GlobalHeaderStyle.scss' as gh;
@import '@influxdata/clockface/dist/variables.scss';
@import 'src/style/_variables.scss';

// These are custom per-page adjustments to certain styles that are currently
// necessary to accomodate the space taken up by the multi-org header in Cloud2.

/* Page Headers Generally */
.multi-org .cf-page-header {
  height: 46px !important;
  flex: 0 0 46px !important;
  margin-bottom: 14px !important;
}

/* Notebooks */
// Browser
.multi-org .cf-page.flows-index {
  height: calc(100% - gh.$globalheader-height);
}

// Page Title
.multi-org
  .flows-index
  > .cf-page-header
  > .cf-page-header--fixed
  > .cf-flex-box {
  height: 32px !important;
  margin-bottom: 10px !important;
}

// Header Block
.multi-org .cf-page-header.withButtonHeader {
  height: 140px !important;
}

/* Notifications */
// When removing multi-org flags, consider whether this override
// should become a permanent change for all users in Clockface.

.cf-notification-container {
  &.cf-notification__top {
    top: $cf-space-2xs;
  }
  &.cf-notification__right {
    right: $cf-space-2xs;
  }
}
